<template>
  <div class="comment">
    <div class="comment-head el-icon-chat-line-round">用户评论</div>
    <el-row>
      <el-col>
        <el-input
          type="textarea"
          :rows="2"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="textarea"
        ></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-button @click="deliver" class="comment-btn">发表评论</el-button>
    </el-row>
    <el-row class="discuss-record" v-for="(content,index) in contents" :key="index">
      <el-col :span="4" style=" text-align: center;">
        <div>
          <el-avatar :size="80" :src="getPic(content.headPic)"></el-avatar>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="discuss-date">
          <span>{{content.userName}}</span>&nbsp;&nbsp;&nbsp;
          <span>{{change(content.commentTime)}}</span>
        </div>
        <el-row>
          <el-col :span="23">
            <div class="discuss-content">{{content.commentContent}}</div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
      contents: []
    };
  },
  computed: {
    user: {
      get() {
        return this.$store.state.user;
      },
      set(v) {
        this.$store.state.user = v;
      }
    }
  },
  methods: {
    deliver() {
      this.$axios
        .post(
          "http://localhost:3000/community/addComment/" + this.user[0].userId,
          { commentContent: this.textarea }
        )
        .then(res => {
          console.log(res.data.data);
          
          this.$message({
            showClose: true,
            message: "评论成功！",
            type: "success",
            center: true
          });
          var time=new Date()
          this.contents.unshift({commentTime:time,userName:this.user[0].userName,headPic:this.user[0].headPic,commentContent:this.textarea})
          this.textarea = "";
        })
        .catch(err => {
          console.log(err);
        });
    },
    change(date) {
      return this.$moment(new Date(date)).format("YYYY-MM-DD HH:mm:ss");
    },
    getPic(pic) {
      if(pic==null){
        return require('../assets/bg.jpg')
      }else{
        let path = "http://localhost:3000/images/" + pic;
      console.log(path);
      return path;
      }
      
    }
  },
  created() {
    this.$axios
      .get("http://localhost:3000/community/getList")
      .then(res => {
        console.log(res.data.data);
        this.contents = res.data.data.reverse();
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style scoped>
.comment {
  background-image: url(../assets/body_bg.png);
}
.comment {
  width: 70%;
  margin: 0 auto;
  min-height: 550px;
}
/* .mydis{
  margin: 20px 0;
} */
.discuss-record {
  color: #666;
  font-size: 18px;
  width: 90%;
  text-align: left;
  margin: 20px auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.discuss-date {
  width: 500px;
  height: 20px;
  font-size: 14px;
}
.el-avatar {
  vertical-align: middle;
}
.el-textarea {
  width: 80%;
  margin: 0 auto;
}
</style>
